<template>
	<view style="overflow-y: auto;">
		<u-swiper name='image' border-radius='1' :duration='duration' :interval='interval' :height="height"
			:list="swipperList">
		</u-swiper>
		<view class="header">
			<view class="title">
				{{good.title}}
			</view>
		</view>
		<view class="info-fa">
			<view class="fa-left">
			</view>
			<view class="goodsInfo">
				物品简介
			</view>
		</view>
		<view class="info">
			<view class="title-desc">
				{{good.introduce}}
			</view>
		</view>
		<view class="info-fa">
			<view class="fa-left">
			</view>
			<view class="goodsInfo">
				拾到地址
			</view>
		</view>
		<view class="info">
			<view class="title-desc">
				{{good.address}}
			</view>
		</view>
		<view class="info-fa">
			<view class="fa-left">
			</view>
			<view class="goodsInfo">
				招领流程
			</view>
		</view>
		<view class="info">
			<u-steps style="width: 100%;" :list="numList" active-color="#4BC26A" :current="4"></u-steps>
		</view>
		<view class="info-fa">
			<view class="fa-left"></view>
			<view class="goodsInfo">
				取物方式
			</view>
		</view>
		<view class="info">
			<view class="title-desc">
				自行协商.自提|送物上门|约定取物点|当面确认
			</view>
		</view>
		<view class="info-fa">
			<view class="fa-left">
			</view>
			<view class="goodsInfo">
				发布时间
			</view>
		</view>
		<view class="info">
			<view class="title-desc">
				{{good.createTime}}
			</view>
		</view>
		<view class="info-fa">
			<view class="fa-left">
			</view>
			<view class="goodsInfo">
				联系方式
			</view>
		</view>
		<view class="useInfo">
			<view class="title-desc">
				电话:{{good.phone}}
			</view>
		</view>
		
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view class="page-box">
						<view id="content-wrap0" class="page-box">
							<view class="comment" v-for="(res,index) in commentList" :key="res.id">
								<view class="left">
									<image :src="http.baseUrl+res.picture" mode="aspectFill"></image>
								</view>w
								<view class="right">
									<view class="top">
										<view class="name">{{res.nickName}}</view>
									</view>
									<view class="content">{{res.commentText}}</view>
									<view class="bottom">
										{{res.createTime}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		
		<view class="navigation">
			<view class="left">
				<view @click="toHome" class="item">
					<u-icon name="home-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">首页</view>
				</view>
				<view @click="collectBtn" class="item">
					<u-icon v-if="hasStatus=='0'" name="star" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view v-if="hasStatus=='0'" class="text u-line-1">收藏</view>
					<u-icon v-if="hasStatus == '1'" name="star" :size="40" color="#4BC26A"></u-icon>
					<view v-if="hasStatus == '1'" style="color: #4BC26A;" class="text u-line-1">收藏</view>
				</view>
				
			</view>
			 <view @click="commentBtn" class="right">
				<view class="cart btn u-line-1">评论</view>
			</view> 
			<view @click="callPhone" class="right">
				<view class="cart btn u-line-1">招领咨询</view>
			</view>
			<!--在线招领-->
			<view @click="toClaim" class="right">
				<view class="cart btn u-line-1">在线招领</view>
			</view>
			
		</view>
		<u-modal confirm-color="#F3AF26" :confirm-style="{padding: '10px'}" title="评论" :show-cancel-button="true" v-model="show" @confirm="confirmBtn" @cancel="cancelBtn" :content="content">
			<view style="height: 100px;">
				<textarea v-model="commentText" placeholder="请输入评论" auto-height></textarea>
			</view>
		</u-modal> 
		<u-modal cancel-color="#F3AF26" :cancel-style="{padding: '10px'}" title="在线招领" :show-cancel-button="true" v-model="tabs"  @confirm="confirmBtn1" @cancel="cancelBtn1" :content="content">
			<view style="height: 100px;">
				<textarea v-model="addGoodsReviceModel.descript" placeholder="请输入描述" auto-height></textarea>
			</view>
			<u-form-item prop="image" label-width="auto" label="物品图片:">
				<u-upload ref="imgRef" @on-change="onChange" @on-remove="onRemove" :action="action" :file-list="fileList"></u-upload>
			</u-form-item>
		</u-modal>
	</view>
</template>

<script setup>
	import http from '../../src/common/http.js'
	import {
		onLoad,
		onShareAppMessage
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue';
	import {hasCollectApi,collectApi} from '../../src/api/goods.js'
	import {commentListApi} from '../../src/api/user.js'
	import {releaseApi} from '../../src/api/goodsRecive.js'
	const action = ref(http.baseUrl + '/api/upload/uploadImage')
	const addGoodsReviceModel = reactive({
		userId:uni.getStorageSync("userId"),
		goodsId:'',
		descript: '',
		image: ''
	})
	const instance = getCurrentInstance()
	//在线招领弹框显示
	const tabs = ref(false);
	//存储图片的地址
	const imgUrl = ref([])
	//在线招领
	const toClaim = ()=>{
		tabs.value = true ;
	}
	//图片上传触发
	const onChange = (res, index, lists, name) => {
		console.log(res.data)
		let result = JSON.parse(res.data)
		console.log(http.baseUrl + result.data)
		imgUrl.value.push(http.baseUrl + result.data)
		//转为逗号分隔的字符串  aa.png,bb.png
		let url = "";
		for (let k = 0; k < imgUrl.value.length; k++) {
			url = url + imgUrl.value[k] + ','
		}
		// console.log(url)
		//末尾的逗号去掉
		addGoodsReviceModel.image = url.substring(0, url.lastIndexOf(','))
		console.log(addGoodsReviceModel)
	}
	//删除图片时触发
	const onRemove = (index, lists, name) => {
		console.log(index)
		//删除数组里面的数据
		imgUrl.value.splice(index, 1);
		let url = "";
		for (let k = 0; k < imgUrl.value.length; k++) {
			url = url + imgUrl.value[k] + ','
		}
		// console.log(url)
		//末尾的逗号去掉
		addGoodsReviceModel.image = url.substring(0, url.lastIndexOf(','))
		console.log(addGoodsReviceModel)
	}
	//评论弹框显示
	const show = ref(false)
	const userId = ref('')
	const commentText = ref('')
	//评论点击事件
	const commentBtn = ()=>{
		
		show.value = true
	}
	//评论提交
	const confirmBtn = async()=>{
		console.log('确定')
		if(!commentText.value){
			uni.showToast({
				icon:'none',
				title:'请填写评论'
			})
			return;
		}
		let res = await addCommentApi({
			userId:uni.getStorageSync("userId"),
			goodId:good.goodsId,
			commentText:commentText.value
		})
		if(res && res.code == 200){
			show.value = false
		}
	}
	//评论取消
	const cancelBtn = ()=>{
		console.log('取消')
		show.value = false
	} 
	//招领提交
	const confirmBtn1 = async()=>{
		if(!addGoodsReviceModel.descript){
			uni.showToast({
				icon:'none',
				title:'请填写描述'
			})
			return;
		}
		let res = await releaseApi({
			userId:uni.getStorageSync("userId"),
			goodsId:good.goodsId,
			descript:addGoodsReviceModel.descript,
			image:addGoodsReviceModel.image
		})
		if(res && res.code == 200){
			tabs.value = false
		}
		
	}
	//招领取消
	const cancelBtn1 = ()=>{
		console.log('取消')
		tabs.value = false
	} 
	//获取评论数据
	const getcommentList = async()=>{
		let res = await commentListApi({
			goodId:good.goodsId
		})
		console.log(res)
		if(res && res.code == 200){
			commentList.value = res.data
		}
	}
	
	//物品信息
	const good = reactive({})
	//轮播图高度
	const height = ref('300')
	//是否显示面板指示点
	const indicatorDots = ref(true)
	//是否自动播放
	const autoplay = ref(true)
	//自动切换时间间隔
	const interval = ref(2000)
	//滑动动画时长
	const duration = ref(500)
	//轮播图数据
	const swipperList = ref([])
	//寻物流程
	const numList = ref(
		[{
			name: '发布信息'
		}, {
			name: '电话沟通'
		}, {
			name: '当面确认'
		}, {
			name: '招领完成'
		}]
	)
	//跳转首页
	const toHome = ()=>{
		uni.switchTab({
			url:"../index/index"
		})
	}
	//寻物咨询
	const callPhone = ()=>{
		uni.makePhoneCall({
			phoneNumber:good.phone,
			success: (res) => {
				
			},
			fail: (res) => {
				
			}
		})
	}
	//分享
	// const shareBtn = ()=>{
	// 	console.log('分享')
	// 	uni.share({
	// 		provider: "weixin",
	// 		scene: "WXSceneSession",
	// 		type: 5,
	// 		summary: good.title,
	// 		success: function (res) {
	// 			console.log("success:" + JSON.stringify(res));
	// 		},
	// 		fail: function (err) {
	// 			console.log("fail:" + JSON.stringify(err));
	// 		}
	// 	});
	
	// }
	//分享
	onShareAppMessage((res)=>{
		return{
			title:good.title,
			path:"/pages/claim_detail/claim_detail?goods="+JSON.stringify(good)
		}
	})
	//判断是否已经收藏
	const hasStatus = ref('0')
	const hasCollect = async()=>{
		let res = await hasCollectApi({
			userId:uni.getStorageSync("userId"),
			goodsId:good.goodsId
		})
		if(res && res.code == 200){
			console.log(res)
			hasStatus.value = res.data;
		}
	}
	//收藏
	const collectBtn = async()=>{
		let res = await collectApi({
			userId:uni.getStorageSync("userId"),
			goodsId:good.goodsId,
		})
		if(res && res.code == 200){
			//判断是否已经收藏
			hasCollect()
		}
	}
	onLoad((option) => {
		console.log(option)
		//转换为json
		let goods = JSON.parse(option.goods)
		//把传递过来的数据设置到上面定义的good里面
		Object.assign(good, goods)
		if (goods.image) {
			swipperList.value = goods.image.split(",")
		}
		//判断是否已经收藏
		hasCollect()
		getcommentList()
	})
	//评论列表
	const commentList = ref([
		{
			id:3333,
			name:'hh',
			date:'03-25 18:58',
			url:'https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280',
			contentText:'hh',
			allReply:12,
			likeNum:33,
			isLike:false,
			replyList: [{
				name:'uview',
				contentStr:'uview'
			}]
		}
	]) 
	//评论高度
	const swiperHeight = ref(0)
	const currentIndex = ref(0)
	const setSwiperHeight = ()=>{
		let element = '#content-wrap' + currentIndex.value;
		let query = uni.createSelectorQuery().in(instance);
		query.exec((res)=>{
			console.log(res)
			if(res && res[0]){
				swiperHeight.value = res[0].height-100;
			}
		})
	}
	
</script>

<style lang="scss">
	.shitem{
		height: 14px;
		line-height: 14px;
		width: 20px;
	}
	.sharebutton{
		display: flex;
		flex-direction: column;
		padding: 0;
		font-size: 20rpx;
		background-color: #FFF;
	}
	button::after{
		border: 0;
	}
	.header {
		display: flex;

	}

	.title {
		color: #303133;
		font-weight: bold;
		font-size: 30rpx;
		padding: 20rpx;
	}

	.info-fa {
		display: flex;
		align-items: center;
	}

	.fa-left {
		width: 1px;
		height: 12px;
		border-left: 3px solid #4BC26A;
		margin-left: 10px;
	}

	.goodsInfo {
		padding: 5px;
		color: #4BC26A;
	}

	.info {
		display: flex;
		align-items: center;
		background-color: #FFF;
		margin-bottom: 25px;
		padding: 0px 20px;
	}

	.useInfo {
		display: flex;
		flex-direction: column;
		margin-left: 20px;
		// margin-bottom: 20px;
	}

	.navigation {
		display: flex;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
		position: fixed;
		width: 100%;
		bottom: 0;
		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #4BC26A;
				margin-right: 30rpx;
			}

			.buy {
				background-color: #4BC26A;
			}
		}
	}
	.comment{
		display: flex;
		padding: 30rpx;
		.left{
			image{
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				background-color: #f2f2f2;
			}
		}
		.right{
			flex:1;
			padding-left: 20rpx;
			font-size: 30rpx;
			.top{
				display: flex;
				padding-left: 20rpx;
				align-items: center;
				margin-bottom: 10rpx;
				.name{
					color:#5677fc;
				}
			}
			.like{
				display: flex;
				align-items: center;
				color: #9a9a9a;
				font-size: 26rpx;
				.num{
					margin-right: 4rpx;
					color: #9a9a9a;
				}
			}
			.highlight{
				color: #5677fc;
				.num{
					color: #5677fc;
				}
			}
		}
		.content{
			margin-bottom: 10rpx;
		}
		.reply-box{
			background-color: rgb(242, 242, 242);
			border-radius: 12rpx;
			.item{
				padding: 20rpx;
				border-bottom: solid 20rpx uni-border-color;
				.username{
					font-size: 24rpx;
					color: #999999;
				}
			}
			.all-reply{
				padding: 20rpx;
				display: flex;
				color: #5677fc;
				align-items: center;
				.more{
					margin-left: 6rpx;
				}
			}
		}
		.bottom{
			margin-top: 20rpx;
			display: flex;
			font-size: 24rpx;
			color: #9a9a9a;
			.reply{
				color: #5677fc;
				margin-left: 10rpx;
			}
		}
	}
</style>
